<template>
  <div class="star">
    <span v-html="starClassess"></span>
  </div>
</template>

<script type="text/javascript">
//这里是类名常量
const CLASS_ON = " <i class='fas fa-star' style='color: gold' /> ";
const CLASS_HALF = " <i class='fas fa-star-half' style='color: gold' > ";
const CLASS_OFF = " <i class='far fa-star' style='color: gold' > ";
export default {
  props: {
    //尺寸大小，分数不同星星不同
    score: Number,
  },
  computed: {
    starClassess() {
      const { score } = this;
      const scs = [];
      //总个数5个
      //全星星on n个CLASS_ON
      const scoreInteger = Math.floor(score);
      for (let i = 0; i < scoreInteger; i++) {
        scs.push(CLASS_ON);
      }
      //半星星0/1个CLASS_HALF
      if (score * 10 - scoreInteger * 10 >= 5) {
        scs.push(CLASS_HALF);
      }
      //无星星 nCLASS_OFF
      while (scs.length < 5) {
        scs.push(CLASS_OFF);
      }
      return scs.join("");
    },
  },
};
</script>
<style scoped></style>
